<script setup lang="ts">
import { useRouter } from 'vue-router';
import { informationGet } from '@/services/index.ts';
import type { AddressDefault } from '@/types';

const $router = useRouter();
const addressData = ref<AddressDefault[]>([]);
const onAddAddressClick = () => {
  $router.push({ path: '/editAddress' });
};
const onEditClick = (item: any) => {
  $router.push({
    path: '/editAddress',
    query: {
      id: item.customerShippingId,
    },
  });
};
const onChangeAddress = (item: any) => {
  const storedUser = sessionStorage.getItem('addressData')
    ? JSON.parse(sessionStorage.getItem('addressData') as string)
    : '';
  if (storedUser.type === 'buyNow') {
    $router.push({
      path: '/settlement',
      query: {
        customerShippingId: item.customerShippingId,
        amount: storedUser.amount,
        goodsId: storedUser.goodsId,
      },
    });
  } else if (storedUser.type === 'joinCart') {
    $router.push({
      path: '/settlement',
      query: {
        customerShippingId: item.customerShippingId,
      },
    });
  } else {
    return;
  }
};
const loadData = async () => {
  const { data, err } = await informationGet();
  if (err) {
    showToast(err);
    return;
  }
  addressData.value = data.customerShippingDetailList;
};
onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="address_container">
    <div class="address_box" v-for="item in addressData" :key="item.id">
      <div class="address_text" @click="onChangeAddress(item)">
        <div>{{ item.shippingAddressDetail }}</div>
        <div class="address_photo">
          {{ `${item.shippingMobile} ${item.shippingPerson}` }}
          <van-tag color="#E89000" v-if="item.defaultFlag === 'YES'">默认</van-tag>
        </div>
      </div>
      <svg-icon @click="onEditClick(item)" icon-class="edit" size="1.3em" />
    </div>

    <van-empty v-show="addressData.length === 0" description="暂无地址" />
    <div class="address_bottom">
      <van-button color="#E89000" round block @click="onAddAddressClick">新增地址</van-button>
    </div>
    <div class="address_footer"></div>
  </div>
</template>

<style scoped lang="scss">
.address_container {
  width: 100%;
  min-height: 100vh;
  background: #f6f6f6;

  .address_box {
    width: 100%;
    padding: 8px 16px;
    min-height: 90px;
    border-bottom: 1px solid #0000001a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;

    .address_text {
      width: 300px;
      font-size: 16px;
      font-weight: 500;
      color: #222222;

      .address_photo {
        margin-top: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #787878;
      }
    }
  }

  .address_bottom {
    width: 100%;
    height: 72px;
    padding: 0 24px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;

    .van-button--round {
      height: 40px;
      margin: 8px 0;
    }
  }

  .address_footer {
    width: 100%;
    height: 80px;
    background: #f6f6f6;
  }
}
</style>
